<template>
  <div class="container">
    <el-menu
      class="head"
      mode="horizontal"
      background-color="#46484b"
      text-color="#fff"
      active-text-color="#000000"
    >
      <div class="head-content">
        <img src="./image/logol.png" class="logol" />
        <router-link to="my-home"
          ><el-menu-item class="music" @click="toMusic"
            ><span :class="{ highlight: music }">音乐馆</span></el-menu-item
          ></router-link
        >
        <router-link to="my-self"
          ><el-menu-item class="myMusic" @click="toMyMusic"
            ><span :class="{ highlight: myMusic }">我的音乐</span></el-menu-item
          ></router-link
        >
        <el-menu-item class="myMusic">关注</el-menu-item>
        <el-menu-item class="myMusic">下载客户端</el-menu-item>
        <el-menu-item class="myMusic">充值</el-menu-item>

        <el-input
          placeholder="搜索音乐、mv、歌单、用户"
          prefix-icon="el-icon-search"
          size="medium"
          class="search"
        >
        </el-input>
        <div class="login" @click="goLogin">登录</div>
      </div>
    </el-menu>
    <el-dialog
      title="手机号码登录"
      :visible.sync="visibleLoginForm"
      width="30em"
      class="dialog"
    >
      <!--ref：添加一个标识符   model：表单数据对象   rules：表单验证规则 -->
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="6em"
      >
        <el-form-item prop="phone" label="手机号：">
          <el-input
            placeholder="请输入手机号"
            v-model="ruleForm.phone"
            size="medium"
            oninput="value=value.replace(/[^\d.]/g,'')"
            class="phone"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码：">
          <el-input
            placeholder="请输入密码"
            v-model="ruleForm.password"
            :show-password="true"
            size="medium"
            class="password"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-button class="btn" @click="login">登录</el-button>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "MyHeader",
  data() {
    return {
      //弹框
      visibleLoginForm: false,
      //表单验证数据
      ruleForm: {
        phone: "",
        password: "",
      },
      //表单验证规则
      rules: {
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          // {
          //   min: 11,
          //   max: 11,
          //   message: "请输入正确的手机号码",
          //   trigger: "blur",
          // },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          // { min: 6, max: 18, message: "长度在6到18个字符", trigger: "blur" },
        ],
      },
      //点击选中该状态
      music: "true",
      myMusic: "",
    };
  },
  methods: {
    goLogin() {
      this.visibleLoginForm = true;
    },
    login() {
      console.log(this.ruleForm.phone, this.ruleForm.password);
      this.$router.push({
        path: "/my-login",
        query: { phone: this.ruleForm.phone, password: this.ruleForm.password },
      });
      this.$store.dispatch("login", {
        phone: this.ruleForm.phone,
        password: this.ruleForm.password,
      });
    },
    toMusic() {
      this.music = true;
      this.myMusic = false;
    },
    toMyMusic() {
      this.music = false;
      this.myMusic = true;
    },
  },
};
</script>

<style lang='less' scoped>
.container {
  width: auto;
  height: auto;
  overflow-x: auto;
  white-space: nowrap;

  .head {
    display: flex;
    margin: auto;
    height: 4em;

    .head-content {
      display: flex;
      margin: auto;
      .logol {
        margin-top: 0.5em;
        width: 3.1em;
        height: 2.5em;
        float: left;
      }

      .music {
      }

      .myMusic {
      }
      .search {
        margin-top: 0.6em;
        margin-left: 5em;
        width: 16em;
        height: 1em;
      }
      .login {
        margin-top: 1.99em;
        margin-left: 3em;
        font-size: 0.6em;
        color: #f0eaea;
      }
      .login:hover {
        color: rgb(206, 5, 5);
      }
      .highlight {
        background: rgba(0, 0, 0, 0.2);
        padding: 1.5em 1.8em;
        pointer-events: none;
      }
    }
  }
}
.dialog {
  width: auto;
  position: fixed;
  top: 5em;
  left: 0;
  right: 0;
  bottom: 0;

  .phone {
    // margin: auto;
    display: block;
    width: 20em;
  }
  .phone :focus {
    border-color: rgb(206, 5, 5);
    box-shadow: 0 0 0.1px rgb(206, 5, 5);
  }
  .password {
    // margin: auto;
    display: block;
    width: 20em;
  }
  .password :focus {
    border-color: rgb(206, 5, 5);
    box-shadow: 0 0 0.1px rgb(206, 5, 5);
  }
  .btn {
    margin: auto;
    display: block;
    width: 50%;
    background: rgba(206, 5, 5, 0.7);
    color: #f0eaea;
  }
  .btn:hover {
    background: rgb(206, 5, 5);
    color: #f0eaea;
  }
}
.lable.error {
  margin: auto;
}
</style>
